<script setup>
import { ref, onMounted } from 'vue'
import { Edit } from '@element-plus/icons-vue'
import router from '@/router'
import { getUserBaseInfo, uploadUserStatus } from '@/api/userinfo.js'
import {
  idToDegreeValue,
  degreeMap,
  StatusMap,
  idToStatusValue,
  ValueToStatusid
} from '@/utils/Map.js'
const UserInfo = ref({})
const options = ref([
  {
    id: '0',
    value: '离校-随时到岗',
    label: '离校-随时到岗'
  },
  {
    id: '1',
    value: '在校-暂不考虑',
    label: '在校-暂不考虑'
  },
  {
    id: '2',
    value: '在校-考虑机会',
    label: '在校-考虑机会'
  },
  {
    id: '3',
    value: '在校-月内到岗',
    label: '在校-月内到岗'
  }
])
const edu = ref('')
const degreeValue = ref('')
const StatusValue = ref('')
const StatusId = ref()
const edit_resume = () => {
  router.push('/Resume')
}
const SelectChange = async () => {
  StatusId.value = ValueToStatusid(StatusValue.value, StatusMap).id
  // console.log(StatusId.value)
  const res = await uploadUserStatus(StatusId.value)
  console.log(res)
}
onMounted(async () => {
  const res = await getUserBaseInfo()
  UserInfo.value = res.data.data
  edu.value = `${UserInfo.value.universityName}·${UserInfo.value.major}`
  degreeValue.value = idToDegreeValue(UserInfo.value.degree, degreeMap).value
  StatusValue.value = idToStatusValue(UserInfo.value.status, StatusMap).value
})
</script>

<template>
  <div class="banner">
    <div class="container">
      <div class="headerbox">
        <img :src="UserInfo.profile" class="heading" />
      </div>
      <div class="content">
        <div class="username">
          <span>{{ UserInfo.username }}</span>
        </div>
        <div class="userInfo">
          <el-space spacer="|">
            <span>{{ UserInfo.age }}</span>
            <span>{{ UserInfo.identity }}</span>
            <span>{{ degreeValue }}</span>
          </el-space>
        </div>
        <div class="now-state">
          <el-select v-model="StatusValue" @change="SelectChange">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="other-info">
        <div class="expect">
          <span>期望：{{ UserInfo.expect }}</span>
        </div>
        <div class="edu">
          <span>{{ edu }}</span>
        </div>
      </div>
      <div class="edit-resume">
        <div class="edit-btn">
          <el-button :icon="Edit" round @click="edit_resume">
            在线简历
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.banner {
  margin-bottom: 12px;
  padding: 20px 0 20px 24px;
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  text-align: center;
  .container {
    display: flex;
    .headerbox {
      position: relative;
      height: 60px;
      width: 60px;
      .heading {
        background-color: #f6f6f8;
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .content {
      margin-left: 20px;
      text-align: left;
      .username {
        font-weight: 500;
        font-size: 20px;
        color: #222;
        height: 24px;
        line-height: 24px;
        span {
          vertical-align: top;
        }
      }
      .userInfo {
        font-size: 14px;
        margin-top: 8px;
        color: #666;
      }
      .now-state {
        margin-top: 12px;
        width: 148px;
        :deep(.el-select) {
          box-sizing: border-box;
          position: relative;
          :deep(.el-select__wrapper) {
            width: 148px;
            height: 36px;
            border-radius: 8px;
            color: #1d2129;
          }
        }
      }
    }
    .other-info {
      max-width: 600px;
      flex: 1;
      margin-left: 102px;
      font-size: 14px;
      font-weight: 500;
      color: #333;
      text-align: left;
      .expect {
        height: 20px;
        span {
          max-width: 280px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
      .edu {
        padding-top: 20px;
        span {
          max-width: 280px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          display: inline-block;
          vertical-align: top;
          height: 20px;
          line-height: 20px;
        }
      }
    }
    .edit-resume {
      display: flex;
      .edit-btn {
        margin-top: 4px;
        width: 98px;
        height: 36px;
        cursor: pointer;
      }
    }
  }
}
</style>
